<template>
	<view class="uiwu">
		<image :style="{'top':uiwu.headHeight() / 2 + uiwu.statusBar() + 'px'}" @tap.stop="openBack" src="/static/bgback.png" mode="widthFix" class="uiwu-back"></image>
		<swiper indicator-dots indicator-active-color="#FFFFFF" indicator-color="rgba(255,255,255,0.4)" class="uiwu-swiper">
			<swiper-item v-for="(item,index) in items.image" :key="index">
				<image :src="item" mode="aspectFill"></image>
			</swiper-item>
		</swiper>
		<view class="uiwu-goods">
			<view class="title">{{items.store_name}}</view>
			<view class="uiwu-flex-space">
				<uiwu-price-model
					:money="items.integral" 
					colors="#FF5100"
					symbol_text="积分" 
					money_size="36" 
					symbol_location="right" 
					symbol_size="28" 
				/>
				<text class="stock">库存: {{items.stock}}件</text>
			</view>
			
		</view>
		
		
		<view class="uiwu-address">
			<view class="no-address uiwu-flex-space" @tap.stop="openAddress">
				<text class="name">收货地址</text>
				<input v-if="!defaultAdd" disabled placeholder="请选择收货地址">
				<view class="detal" v-else>
					<view class="name">{{defaultAdd.real_name}}  {{defaultAdd.phone}}</view>
					<view class="text">{{defaultAdd.province}}{{defaultAdd.city}}{{defaultAdd.district}}{{defaultAdd.detail}}</view>
				</view>
				<uiwu-icon type="arrowright"></uiwu-icon>
			</view>
		</view>
		
		<view class="uiwu-content">
			<mp-html :content="items.details"></mp-html>
		</view>
		<uiwu-footer height="80rpx">
			<view class="uiwu-footer">
				<view class="uiwu-footer-box uiwu-flex-center" v-if="Number(userInfo.integral) > Number(items.integral)" @tap="showModel=true">立即兑换</view>
				<view class="uiwu-footer-box uiwu-flex-center" v-else style="background-color: #CCCCCC;">积分不足</view>
			</view>
		</uiwu-footer>
		<uiwu-popup-model v-model="showModel" @confirm="confirm">
			<view>
				该商品需要<text style="color: #EF821E;">{{items.integral}}</text>积分兑换
				是否兑换
			</view>
		</uiwu-popup-model>
	</view>
</template>

<script setup lang="ts">
	import { onLoad , onUnload } from '@dcloudio/uni-app';
	import { ref , inject , toRef} from "vue";
	import { addressDefault, createOrder, goodsDetail } from "@/api/api";
	import { uiwu } from "@/config/config";
	const store = inject<any>('store');
	const userInfo = toRef(store.state,'userInfo')
	const defaultAdd = ref(null)
	const showModel = ref<boolean>(false)
	const items = ref<object>({})
	const confirm = async () => {
		if(Number(userInfo.value.integral) < Number(items.value.integral)) return uiwu.toast('可用积分不足')
		if(!defaultAdd?.value?.id) return uiwu.toast('请选择收货地址')
		const result = await createOrder({
			integral_product_id:items.value.id,
			address_id:defaultAdd.value.id
		})
		uiwu.toast(result.msg)
		// uiwu.toast('兑换失败')
	}
	const getaddressDefault = async () : Promise<any> => {
		const {data} = await addressDefault();
		defaultAdd.value = data
	}
	const openAddress = () : void => {
		uiwu.openWindow('/pages/user/address?select=true')
	}
	const openBack = () => {
		uni.navigateBack()
	}
	const getGoodsDetal = async (id) : void => {
		const {data} = await goodsDetail(id);
		data.details = uiwu.richtext(data.details)
		data.image = data.image.split(',')
		items.value = data
	}
	onLoad(({id})=>{
		getGoodsDetal(id)
		getaddressDefault()
		uni.$on('changeAddress',(res)=>{
			defaultAdd.value = res
		})
	})
	onUnload(()=>{
		uni.$off('changeAddress')
	})
</script>

<style lang="scss">
	page{
		background-color: #F6F6F6;
	}
	.uiwu-swiper{
		width: 100%;
		height: 750rpx;
		image{
			width: 100%;
			height: 100%;
		}
	}
	.uiwu-back{
		position: absolute;
		left: 24rpx;
		z-index: 99;
		width: 56rpx;
	}
	.uiwu-goods{
		background-color: #fff;
		padding: 24rpx;
		.title{
			font-size: 32rpx;
			font-weight: bold;
			color: #161A1B;
			margin-bottom: 28rpx;
		}
		.stock{
			font-size: 24rpx;
			font-weight: 400;
			color: #999999;
		}
	}
	.uiwu-address{
		padding: 28rpx 24rpx;
		background-color: #fff;
		margin: 20rpx 0;
		.name{
			font-size: 28rpx;
			font-weight: bold;
			color: #231815;
		}
		input{
			flex: 1;
			font-size: 28rpx;
			margin: 0 32rpx;
		}
		.detal{
			flex: 1;
			margin: 0 32rpx;
			font-size: 24rpx;
			font-weight: 500;
			color: #666666;
		}
	}
	.uiwu-content{
		font-size: 28rpx;
		padding: 24rpx;
		background-color: #fff;
		image{
			width: 100%;
		}
	}
	.uiwu-footer{
		width: 100%;
		height: 100%;
		padding: 0 40rpx;
		&-box{
			width: 100%;
			height: 80rpx;
			background: #EF821E;
			border-radius: 40rpx;
			font-size: 32rpx;
			font-weight: bold;
			color: #FFFFFF;
		}
	}
</style>
